<style scoped>
    .article_serach {
        width:7.5rem;
        margin:0 auto;
        overflow-x: hidden;
        overflow-y: auto;
        position: relative;
        height: 100vh;
    }

    

    .article_search_cancel {
        font-family: PingFangSC-Regular;
        font-size: 0.34rem;
        color: #FFF;
        min-width:0.7rem;
        height: 0.6rem;
        margin-left:0.2rem;
        display: flex;
        align-items: center;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .history_cont {
        display: flex;
        flex-wrap: wrap;
    }

    .history_item {
        min-width: 1.46rem;
        height: 0.46rem;
        background: #E9EAEC;
        border-radius: 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: PingFangSC-Regular;
        font-size: 0.28rem;
        color: #333;
        margin-right:0.16rem;
        margin-bottom:0.16rem;
        padding:0 0.2rem;
    }

    .article_serach .home-header {
        height: 1rem;
        width:7.5rem;
        overflow: hidden;
        background-image: linear-gradient(-90deg, #B3A277 0%, #AB946C 100%);
        display: flex;
        justify-content: space-between;
        align-items: center;
        box-sizing: border-box;
        padding:0 0.14rem 0 0.24rem;
        
    }

    .article_serach .home-index-search {
        height: 0.6rem;
        background-color:#fff;
        position: relative;
        flex:1;
        box-sizing: border-box;
    }

    .home-index-search i.icon-sousuo{
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        left:0.28rem;
        color:#B2B2B2;
    }


    .home-index-search i.icon-guanbi {
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        right:0.28rem;
        color:#B2B2B2;
    }

    .article_serach .home-index-search input {
        border:none;
        width:100%;
        height: 0.6rem;
        font-size:0.28rem;
        padding:0 0.68rem 0 0.68rem;
        box-sizing: border-box;
        color:#666
    }

    .history_record {
        width: 7.5rem;
        background-color: #fff;
        min-height: 100vh;
        padding:0 0.3rem;
        box-sizing: border-box;
        
    }

    .history_record h2 {
        font-family: PingFangSC-Medium;
        font-size: 0.34rem;
        color: #333;
        justify-content: space-between;
        display: flex;
        text-align: center;
        width:100%;
        padding:0.26rem 0;
    }


    .item-list {
        width:100%;
        height: 2.3rem;
        border-top:1px solid #E3E3E3;
        border-bottom: 1px solid #E3E3E3;
        display: flex;
        padding:0.25rem;
        box-sizing: border-box;
        background-color: #fff;
        margin-bottom: 0.2rem;
    }

    .item-list img {
        width:1.8rem;
        height: 1.8rem;
        border-radius: 10px;
        margin-right:0.34rem;
    }

    .item-list h2 {
        font-size:0.34rem;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.14rem;
        text-align: left;
    }

    .item-list h2 span {
        font-size: 0.24rem;
        color: #999;
    }

    .item-list p {
        font-size: 0.28rem;
        color: #666;
        line-height: 0.4rem;
    }

    .item-list-cont {
        flex:1
    }

    .item-list-cont p {
        width:100%;
        font-family: PingFangSC-Regular;
        font-size:0.28rem;
        color: #666666;
        text-align: justify;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 1.5;
        height:1.2rem;
        overflow: hidden
    }
</style>

<template>
    <div class="article_serach">
        <div class="home-header">
            <div class="home-index-search">
                <i class="iconfont icon-sousuo"></i>
                <input type="text" placeholder="寺庙名称" v-model="monasteryname">
                <i class="iconfont icon-guanbi" @click="clearFn()"></i>
            </div>

            <span class="article_search_cancel" @click="onClickLeft">取消</span>
        </div>


        <!-- 历史记录 -->
        <div class="history_record" v-if="state">
            <!-- <i class="iconfont icon-guanbi"></i> -->
            <h2>历史搜索</h2>
            <div class="history_cont">
                <div class="history_item" v-for="(item, indexs) of list" :key="indexs" v-if="indexs < index" @click="router('/article_details?id='+item.monasteryid)">{{ item.monasteryname }}</div>
            </div>
        </div>
        <!-- 历史记录end -->

        <div class="home-item-list" v-else>
            <div class="item-list" @click="router('/article_details?id='+item.monasteryid)" v-for="(item, index) of list" :key="index" v-if="list.length > 0">
                <img :src="item.showpicture" alt="">
                <div class="item-list-cont">
                    <!-- <span>发布时间:{{item.publishtime}}</span> -->
                    <h2>{{ item.monasteryname }} </h2>
                    <p :title="item.introduction">
                        {{ item.introduction }}
                    </p>
                </div>
            </div>
            <div class="empty"  v-if="list.length <= 0">
                <i class="iconfont icon-kongzhuangtai-"></i>
                <span>没有找到您想要的内容</span>
            </div>
            
        </div>
        

    </div>
</template>
<script>
import {getResponse, getResponses} from "../api"
export default {
    data() {
        return {
            monasteryname:'',
            list:[],
            state:true,
            index:0
        }
    },

    watch:{
        monasteryname() {
            this.getMusic()
        }
    },

    methods:{
        onClickLeft() {
            this.$router.go(-1)
        },

        clearFn() {
            this.monasteryname = ''
        },

        router(url) {
            this.$router.push(url)
        },

        switchFn(name) {
            this.monasteryname = name
        },
        //寺庙列表
        async getMusic(type) {
            
            const data = await getResponses(`/fochina/query/monasterylist/json`,{'querytype':2, 'property':1, 'monasteryname': this.monasteryname, 'title': this.monasteryname })
            
            
            if(data.code === '0000') {
                this.state = this.monasteryname == ''
                this.list = data.data
            } else {
                console.log(data.error)
            }
        },
    },

    mounted() {
        this.index = parseInt(Math.random() * 10)
        this.getMusic()
    }
}
</script>
